<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" @select="selectMenu"
        default-active="2" text-color="#fff">

        <el-sub-menu v-for="menu in menuList" :index="menu.url">
            <template #title>
                <span>{{ menu.menuName }}</span>
            </template>

            <SysMenuItem v-for="childMenu in menu.children" :menu="childMenu"></SysMenuItem>






        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts" name='SysMenu'>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router'
import { usePermission } from '@/store/userpermission'
const permissionStrore = usePermission()

import SysMenuItem from "./SysMenuItem.vue";


const menuList = ref([])
// import router from '@/router'

//获取Router对象
const router = useRouter();


function selectMenu(url: string) {
    console.log("url", url);
    router.push(url)
}


function loadUserRouter() {

    const userRouters = {
        path: "/home",
        component: () => import("@/views/Home.vue"),
        children:
            permissionStrore.getRouter
        ,
    };

    router.addRoute(userRouters);
}

onMounted(() => {
    // console.log("permissionStrore.getMenus()", permissionStrore.getMenus)
    menuList.value = permissionStrore.getMenus;

    loadUserRouter();

})



</script>

<style scoped></style>